<template>
  <div class="home-container">
    <header class="header">
      <router-link to="/TodoList" class="nav-link">TodoList </router-link>
      <router-link to="/about" class="nav-link">个人简介</router-link>
    </header>

    <footer class="footer">
      <p>&copy; 2025 Vue.js 项目</p>
    </footer>
  </div>
</template>p

<script>
export default {
  name: 'Home',
};
</script>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 20px;
  
}

.header {
  position: relative;
  display: flex;
  width: 100%;
  height: 60px;
  font-size: 20px;
}

.introduction {
  margin-bottom: 20px;
}

.introduction h2 {
  font-size: 1.8em;
  color: #333;
}

.introduction p {
  font-size: 1.2em;
  color: #666;
}

.introduction ul {
  list-style-type: none;
  padding: 0;
  margin: 10px 0;
}

.introduction ul li {
  font-size: 1.1em;
  color: #333;
  margin: 5px 0;
}

.navigation {
  margin-bottom: 40px;
}

.nav-link {
  display: inline-block;
  margin: 10px 0;
  padding: 12px 24px;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.3s ease, color 0.3s ease;
}

.nav-link:hover {
  border-bottom: 3px solid #5e5859;
}


.footer {
  text-align: center;
  font-size: 0.9em;
  color: #666;
  margin-top: 400px;
}
</style>